import React from 'react'
import { TabTitle, TabContent } from '../../components'
/**
 *
 * 复习上午知识：
 * jsx: html  css  js  {}
 * 1. 标签 必须 闭合 <img src="" /> <hr />  <br /> <input />
 * 2. lable for -> htmlFor
 * 3. 设置html: dangerousSetInnerHTML={{__html: 数据}}
 * 4. 虚拟标签<></> / Fragment
 *
 * 5. style={{}}
 * 6. class -> className
 *
 * // js
 * 7. 判断 使用三目
 * 8. 事件名称：使用驼峰
 * 9. 变量 {}包裹
 * 10. 注释 { ... }
 *
 * 11. 需要换行的时候，可以使用小括号包裹所有代码
 */

class Home extends React.Component {
  constructor(props) {
    super(props) // 执行超类，执行了一遍父组件
    this.state = {
      title: 'App, hello world',
      footer: '<footer class="footer">footer</footer>',
      list: [
        {
          cityName: '北京',
          children: [
            { name: '海淀区', pid: 1 },
            { name: '丰台区', pid: 1 },
            { name: '朝阳区', pid: 1 },
          ],
        },
        {
          cityName: '上海',
          children: [
            { name: '奉贤区', pid: 2 },
            { name: '浦东区', pid: 2 },
            { name: '普陀区', pid: 2 },
          ],
        },
      ],
      cityArr: [], // 放置切换的内容
      tabIndex: 0, // tab切换初始化下标
      tabConentIndex: 0,
    }
  }
  handTabClick = ({ city, index }) => {
    console.log(city, index, '------------:')
    this.setState({
      cityArr: city,
      tabIndex: index,
    })
  }

  // dom挂载结束之后执行一次的生命周期
  // componentDidMount => mounted
  componentDidMount() {
    // 1. 初始化数据 2. 副作用处理，处理axios 3. 处理dom操作
    this.setState({
      cityArr: this.state.list[0].children,
    })
  }

  render() {
    /**
     * 一、父传子
     * 1. 属性传参 props接收，校验
     * 二、子传父
     * （vue: $emit + 自定义事件监听 @handleClick="handleClick"）
     * react: 事件回调
     * 1. 父组件传递一个 函数 给子组件
     * 2. 但是这个函数，在子组件内部执行，把实参传递给父组件 内部函数 的形参
     *
     * 封装组件的一个思想：（数据往下流，逻辑往上走）优点： 1. 逻辑清晰 2. 便于优化
     * 父组件放数据，放逻辑
     * 子组件负责渲染和事件回调
     *
     *
     * 回调函数：
     * 1. 是一个函数
     * 2. 作为了参数
     * 3. 在函数内部执行
     */

    return (
      <>
        {/* tabTitle */}
        <TabTitle
          title={0}
          tabIndex={this.state.tabIndex}
          list={this.state.list}
          handTabClick={({ city, index }) => this.handTabClick({ city, index })}
        />
        {/* tabContent */}
        <TabContent
          cityArr={this.state.cityArr}
          handleContentClick={(index) => {
            console.log(index, 'index')
            this.setState({
              tabConentIndex: index,
            })
          }}
          tabConentIndex={this.state.tabConentIndex}
        />
      </>
    )
  }
}

export default Home
